/**
 * 用受控组件的方式，实现下面的注册功能
 */

import React from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {
  // 初始化state
  state = {
    username: "123", // 用户名
    password: "456", // 密码
    jianjie: "洗脚，吃饭", // 个人简介
    sex: "女", // 性别
    loves: ["Orange"], // 喜欢的水果
    city: "上海", // 城市
  };

  saveFormData = (key) => {
    // key => username \ password ...
    return (event) => {
      this.setState({
        [key]: event.target.value,
      });
    };
  };

  // 设置loves
  saveLoves = (event) => {
    // 有问题
    // console.log(event.target.value);
    // this.setState({
    //   loves: event.target.value,
    // });

    // 取值
    const value = event.target.value;
    const { loves } = this.state;

    // 判断 value 是否在 loves 中
    const index = loves.findIndex((item) => item === value);

    if (index > -1) {
      // 在，页面当前是勾选上的，然后要取消勾选，删除它
      loves.splice(index, 1);
      console.log(loves);

      this.setState({
        loves: loves,
      });
    } else {
      // 不在，页面当前是没勾选的，需要勾选，新增到 loves 数据中
      loves.push(value);
      console.log(loves);

      this.setState({
        loves: loves,
      });
    }
  };

  render() {
    console.log("render");
    return (
      <div>
        <h1>App</h1>

        <form>
          <div>
            <label>
              <span>用户名</span>
              <input
                type="text"
                value={this.state.username}
                onChange={this.saveFormData("username")}
              />
            </label>
          </div>
          <div>
            <label>
              <span>密码</span>
              <input
                type="password"
                value={this.state.password}
                onChange={this.saveFormData("password")}
              />
            </label>
          </div>
          <div>
            <label>
              <span>个人简介</span>
              <textarea
                cols="30"
                rows="10"
                value={this.state.jianjie}
                onChange={this.saveFormData("jianjie")}
              ></textarea>
            </label>
          </div>
          <div>
            <span>性别</span>
            <label>
              {/* 
                这里的 checked 需要的是 Boolean
              */}
              <input
                type="radio"
                value="男"
                checked={this.state.sex === "男"}
                onChange={this.saveFormData("sex")}
              />
              男
            </label>
            <label>
              <input
                type="radio"
                value="女"
                checked={this.state.sex === "女"}
                onChange={this.saveFormData("sex")}
              />
              女
            </label>
          </div>
          <div>
            <label>
              <span>城市</span>
              <select
                value={this.state.city}
                onChange={this.saveFormData("city")}
              >
                <option value="">请选择</option>
                <option value="深圳">深圳</option>
                <option value="广州">广州</option>
                <option value="上海">上海</option>
                <option value="北京">北京</option>
              </select>
            </label>
          </div>

          <div>
            <span>喜欢的水果</span>
            <label>
              <input
                type="checkbox"
                value="Apple"
                checked={this.state.loves.includes("Apple")}
                onChange={this.saveLoves}
              />
              Apple
            </label>
            <label>
              <input
                type="checkbox"
                value="Banana"
                checked={this.state.loves.includes("Banana")}
                onChange={this.saveLoves}
              />
              Banana
            </label>
            <label>
              <input
                type="checkbox"
                value="Orange"
                checked={this.state.loves.includes("Orange")}
                onChange={this.saveLoves}
              />
              Orange
            </label>
          </div>

          <button>注册</button>
        </form>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
